<template>
  <div class="app-container">
    <el-card class="box-card">
      <header>
        <div>
          <el-button size="small" type="primary" @click="addCLick">
            <i class="el-icon-circle-plus-outline"></i>增加
          </el-button>
          <el-button
            :disabled="!multipleSelection.length"
            size="small"
            type="danger"
            @click="deBounceWrap(delClick, multipleSelection)"
          >
            <i class="el-icon-delete"></i>删除
          </el-button>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="form.cate_id"
            placeholder="请选择类别"
            style="width: 17%"
          >
            <el-option
              v-for="item in addEditModal.categoryOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.style_id"
            class="ml-4"
            placeholder="请选择风格标签"
            style="width: 17%"
          >
            <el-option
              v-for="item in addEditModal.styleLabelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="form.get_channel"
            class="ml-4"
            placeholder="获取渠道"
            style="width: 17%"
          ></el-input>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="form.status"
            placeholder="请选择出售状态"
            style="width: 17%"
          >
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
          <el-select
            v-model="form.rarity"
            class="ml-4"
            placeholder="请选择稀有度"
            style="width: 17%"
          >
            <el-option
              v-for="item in rarityLabelList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-model="form.add_date"
            class="ml-4"
            placeholder="添加时间"
            style="width: 17%"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-input
            v-model="form.name"
            class="ml-4"
            placeholder="名称"
            style="width: 17%"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <i
              class="el-icon-search p-1 text-white text-2xl bg-green-500 cursor-pointer"
              @click="getTableData"
            ></i>
            <i
              class="el-icon-refresh p-1 ml-3 text-white text-2xl bg-red-500 cursor-pointer"
              @click="resetClick"
            ></i>
          </div>
        </div>
      </header>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          prop="id"
          width="60"
        ></el-table-column>
        <el-table-column label="名称" prop="product_name"></el-table-column>
        <el-table-column label="类别" prop="cate_name"></el-table-column>
        <el-table-column label="稀有度" prop="rarity_name"></el-table-column>
        <el-table-column label="风格标签" prop="style"></el-table-column>
        <el-table-column label="获取来源" prop="get_channel"></el-table-column>
        <el-table-column label="展示图片" prop="picture">
          <template slot-scope="scope">
            <el-popover max-width="420" placement="left" trigger="hover">
              <img :src="scope.row.picture" alt="" class="w-64 h-64"/>
              <img
                slot="reference"
                :preview-text="`${scope.row.picture}`"
                :src="scope.row.picture"
                alt=""
                class="w-20"
                preview="3"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="效果" prop="special">
          <template slot-scope="scope">
            <div v-if="cateArr.includes(scope.row.category_id)"></div>
            <div v-else-if="inputArr.includes(scope.row.cate_id)"></div>
            <el-popover
              v-else
              max-width="420"
              placement="right"
              trigger="hover"
            >
              <img :src="scope.row.special" alt="" class="w-64 h-64"/>
              <img
                slot="reference"
                :preview-text="`${scope.row.special}`"
                :src="scope.row.special"
                alt=""
                class="w-20"
                preview="3"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="出售状态" prop="status_name">
          <template slot-scope="scope">
            <!-- <div class="px-5 py-1 text-white  rounded-md"
                 :class="scope.row.status_name === '上架' ? 'bg-green-400' : 'bg-red-600' ">{{ scope.row.status_name }}</div> -->
            <el-tag v-if="scope.row.status_name === '上架'" type="success">
              上架
            </el-tag>
            <el-tag v-else type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          prop="add_time"
          width="200"
        ></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              plain
              size="mini"
              type="success"
              @click="editClick(scope.row)"
            >
              <i class="el-icon-edit-outline"></i>编辑
            </el-button>
            <el-button
              plain
              size="small"
              type="primary"
              @click="deBounceWrap(sendClick, scope.row)"
            >
              <i class="el-icon-present"></i>赠送
            </el-button>
            <el-button
              plain
              size="small"
              type="danger"
              @click="deBounceWrap(delClick, [scope.row])"
            >
              <i class="el-icon-delete"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <TMPagination
        :current-page.sync="pageList.page"
        :page-size.sync="pageList.page_size"
        :total.sync="pageList.total"
        @updateTable="getTableData"
      />

      <send-dialog
        :send-dialog-visible.sync="SendDialog.visible"
        :send-form="SendDialog.sendForm"
        @sendForm="sendDialogClick"
      />

      <add-edit-modal
        :id="addEditModal.id"
        :category-option="addEditModal.categoryOption"
        :dialog-visible.sync="addEditModal.visible"
        :event-name-options="rarityLabelList"
        :status.sync="addEditModal.status"
        :style-label-options="addEditModal.styleLabelOptions"
        @updateTable="getTableData"
      />
    </el-card>
  </div>
</template>

<script>
import { getTypeData, rareGoodsList } from '../../../api/personalizedMall/rareCommodities'
import { categoryData, delCommodity, styleLabelData } from '../../../api/personalizedMall/activeCommodities'
import addEditModal from './childComps/addEditModal/addEditModal'

import TMPagination from '../wishList/childComps/TMPagination/TMPagination'
import SendDialog from '../sendComponent/SendDialog'
import { postSendData } from '../../../api/personalizedMall/discount'

export default {
  name: 'rareCommodities',
  components: { TMPagination, addEditModal, SendDialog },
  data() {
    return {
      cateArr: [24, 23], // 文字框  聊天回声 或 公屏回声
      inputArr: [8, 4], // 输入框  靓号  进场特效
      form: {
        cate_id: null, // 分类id，0：不限制，其它的根据接口，必须
        style_id: null, // 风格标签id，0：不限制，其它的根据接口，必须
        name: null, // 商品名称
        status: null, // 出售状态：-1：不限制（默认）；1：上架；0：下架
        add_date: null, // 添加日期，YYYY-mm-dd
        get_channel: null, // 获得渠道
        rarity: null // 稀有度，0：不限制；1：高级；2：稀有；3：珍藏；4：限定
      },
      pageList: {
        page: 1,
        page_size: 10,
        total: 10
      },
      addEditModal: {
        // 风格标签
        styleLabelOptions: [],
        // 所有类别
        categoryOption: [],
        visible: false,
        status: 'Add',
        id: 1
      },
      SendDialog: {
        visible: false,
        sendForm: {}
      },
      rarityLabelList: [],
      value1: null,
      multipleSelection: [],
      tableData: [],
      loading: false
    }
  },
  created() {
    this.styleLabelData()
    this.categoryData()
    this.getTableData()
    this.handleGetTypeData()
  },
  methods: {
    async handleGetTypeData() {
      const res = await getTypeData()
      if (res.code === 200) {
        this.rarityLabelList = res.data
      }
    },
    // 点击事件
    addCLick() {
      this.addEditModal.status = 'Add'
      this.addEditModal.visible = true
    },
    /**
     * sendClick
     * @desc 赠送按钮的点击
     */
    sendClick(sendForm) {
      this.SendDialog.sendForm = sendForm
      this.SendDialog.visible = true
    },
    /**
     * sendDialogClick
     * @param form 子组件传递过来的参数
     * @desc 赠送按钮发生点击事件
     */
    async sendDialogClick(form) {
      const data = await postSendData(form)
      if (data.code === 200) {
        this.$message.success('赠送成功')
        this.SendDialog.visible = false
        await this.getTableData()
      }
    },
    /**
     * resetClick
     * @desc 重置按钮 点击事件
     */
    resetClick() {
      for (const argumentsKey in this.form) {
        this.form[argumentsKey] = null
      }
      this.pageList = {
        page: 1,
        page_size: 10,
        total: 10
      }
      this.getTableData()
    },
    editClick(data) {
      this.addEditModal.id = data.id
      this.addEditModal.status = 'Edit'
      this.addEditModal.visible = true
    },
    /**
     * delClick
     * @desc 点击删除按钮
     * @param idArr {Array} 行数据 [{}]
     */
    async delClick(idArr) {
      this.$confirm('此操作将删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let ids = ''
          idArr.map(
            (item, index) =>
              (ids += index === idArr.length - 1 ? item.id + '' : item.id + ',')
          )

          const detail = await delCommodity(ids)
          if (detail.code === 200) {
            this.$message({ type: 'success', message: '删除成功!' })
            await this.getTableData()
          }
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
    },
    /**
     * checkBoxDisable
     * @desc 选择盒子被禁用
     * @param row 行
     * @returns {boolean}
     */
    checkBoxDisable(row) {
      if (row.name === '小明') {
        return false
      } else {
        return true
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {
      // 默认值
      let form = {
        cate_id: 0, // 分类id，0：不限制，其它的根据接口，必须
        style_id: 0, // 风格标签id，0：不限制，其它的根据接口，必须
        name: null, // 商品名称
        status: -1, // 出售状态：-1：不限制（默认）；1：上架；0：下架
        add_date: null, // 添加日期，YYYY-mm-dd
        get_channel: null, // 获得渠道
        rarity: 0 // 稀有度，0：不限制；1：高级；2：稀有；3：珍藏；4：限定
      }
      /*'dataArr', this.dataArr)
      this.dataArr.map((item, index) => index === 0 ? this.form.start_date = item : this.form.end_date = item )*/
      for (const formKey in this.form) {
        if (
          !(
            !this.form[formKey] &&
            typeof this.form[formKey] != 'undefined' &&
            this.form[formKey] != 0
          )
        ) {
          form[formKey] = this.form[formKey]
        }
      }

      this.loading = true
      const detail = await rareGoodsList(form, {
        page_size: this.pageList.page_size,
        page: this.pageList.page
      })
      if (detail.code === 200) {
        this.tableData = detail.data.data
        this.pageList.page = detail.data.current_page
        this.pageList.total = detail.data.total
        this.pageList.page_size = detail.data.per_page * 1
        this.loading = false
      }
    },
    /**
     * styleLabelData
     * @desc 获取所有的风格标签
     * @returns {Promise<void>}
     */
    async styleLabelData() {
      const detail = await styleLabelData()
      if (detail.code === 200) {
        for (const detailKey in detail.data) {
          this.addEditModal.styleLabelOptions.push({
            value: detail.data[detailKey].id,
            label: detail.data[detailKey].name
          })
        }
        // this.addEditModal.styleLabelOptions)
      }
    },
    /**
     * categoryData
     * @desc 获取所有的类别
     */
    async categoryData() {
      const detail = await categoryData()
      if (detail.code === 200) {
        detail.data.map(item =>
          this.addEditModal.categoryOption.push({
            value: item.id,
            label: item.title
          })
        )
      }
      // 私聊回声的值  公屏回声的值   24  昵称特效的值
    },
    rarityLabelShow(rarity) {
      let data = ''
      this.rarityLabelList.forEach(item =>
        item.value === rarity ? (data = item.label) : null
      )
      return data
    }
  }
}
</script>

<style></style>
